<template>
  <div class="Authentication" ref="homePage">
    <div class="bj">
      <van-nav-bar title="身份认证" left-arrow @click-left="onClickLeft" />
    </div>
    <div style="width: 100%;height: 46px;"></div>
    <div class="atContent">
      <div class="acTop">
        <div class="item">
          <van-field class="input-grounp" v-model="username" name="username" label="真实姓名" placeholder="请输入真实的姓名" />
        </div>
        <div class="item">
          <van-field class="input-grounp" v-model="idcard" name="idcard" label="身份证号" placeholder="请输入身份证号" />
        </div>
        <div class="item">
          <van-field class="input-grounp" v-model="telNum" name="tel" label="联系电话" placeholder="请输入联系电话" />
        </div>
      </div>
      <div class="acBottom">
        <div class="title">上传证件材料</div>
        <div class="acbContent">
          <div class="it">
            <van-uploader :deletable="deletable" :after-read="afterReadz" v-model="idCartImageszm" multiple :max-count="1" upload-text="身份证正面" capture />
          </div>
          <div class="it">
            <van-uploader :deletable="deletable" :after-read="afterReadf" v-model="idCartImagesfm" multiple :max-count="1" upload-text="身份证反面" capture />
          </div>
        </div>

      </div>

      <div class="operBtn">
        <van-button type="primary" size="normal" class="rzBtn-now" @click="Authentication()">立即认证</van-button>
      </div>
    </div>

  </div>
</template>

<script>
import { uploadImg, Authentication } from '@/api/home.js'
export default {
  data () {
    return {
      idCartImageszm: [], // 身份证正面
      idCartImagesfm: [], // 身份证反面
      money: '',
      username: '',
      idcard: '',
      telNum: '',
      frontcardpic: '',
      reversecardpic: '',
      deletable: false,
      imgSN: []
    }
  },
  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}`
    this.$refs.homePage.style.minHeight = this.clientHeight + 'px'
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    validator (val) { // 校验函数返回 true 表示校验通过，false 表示不通过
      return /1\d{10}/.test(val)
    },
    afterReadz (file) {
      // console.log(file.content);
      let data = {
        Type: 'base64',
        ModuleType: 1,
        ImgData: file.content
      }
      uploadImg(data).then(res => {
        console.log(res)
        this.frontcardpic = res.Src
        this.imgSN.push(res.imgSN)
        console.log(this.imgSN)
      })
    },
    afterReadf (file) {
      // console.log(file.content);
      let data = {
        Type: 'base64',
        ModuleType: 1,
        ImgData: file.content
      }
      uploadImg(data).then(res => {
        console.log(res)
        this.reversecardpic = res.Src
        this.imgSN.push(res.imgSN)
        console.log(this.imgSN)
      })
    },
    Authentication () {
      let data = {
        name: this.username,
        idno: this.idcard,
        phone: this.telNum,
        frontcardpic: this.frontcardpic,
        reversecardpic: this.reversecardpic
      }
      // console.log(data)
      // console.log(this.frontcardpic.length)
      if (this.username === '') {
        this.$toast('请输入姓名')
      } else if (this.idcard === '') {
        this.$toast('请输入身份证号')
      } else if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(this.idcard))) {
        this.$toast('请输入正确的身份证号')
      } else if (this.telNum === '') {
        this.$toast('请输入手机号码')
      } else if (this.telNum.length !== 11) {
        this.$toast('请输入正确的手机号码')
      } else if (!this.frontcardpic.length > 0) {
        this.$toast('请上传身份证正面照')
      } else if (!this.reversecardpic.length > 0) {
        this.$toast('请上传身份证反面照')
      } else {
        Authentication(data).then(res => {
          console.log(res)
          if (res.Code === 0) {
            this.$toast('保存成功')
            this.$router.go(-1)
          } else {
            this.$toast(res.Msg)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.Authentication {
  .bj {
    .van-icon {
      color: white !important;
    }
  }
  .atContent {
    padding: 30px 20px;
    .acTop {
      background: #fff;
      -radius: 5px;
      padding: 10px;
      .item {
        border-bottom: 1px solid #dfdfdf;
        .input-grounp {
          border: none;
        }
        /deep/ .van-field__control {
          border: none;
        }
      }
    }
    .acBottom {
      .title {
        font-size: 16px;
        padding: 15px 0;
      }
      .acbContent {
        display: flex;
        justify-content: center;
      }
      .acbContent .it {
        width: 100%;
        text-align: center;
        /deep/ .van-uploader {
          display: block;
        }
        /deep/ .van-uploader__upload {
          width: 100%;
          height: 120px;
        }
        /deep/ .van-uploader__preview {
          width: 100%;
          height: 120px;
          /deep/ .van-uploader__preview-image {
            width: 100%;
            height: 120px;
          }
        }
      }
    }
    .operBtn {
      padding: 30px 20px;
      text-align: center;
      .rzBtn-now {
        width: 100%;
        background: #2cafab;
        border: 1px solid #2cafab;
      }
    }
  }
}
</style>
